<template>
  <el-card class="box-card">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>

            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>

            <el-form-item label="商品分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>

            <el-form-item label="商品价格">
              <span>{{ props.row.price }}</span>
            </el-form-item>

            <el-form-item label="商品图片">
              <span>{{ props.row.imgUrl }}</span>
            </el-form-item>

            <el-form-item label="创建时间">
              <span>{{ props.row.ctime }}</span>
            </el-form-item>

            <el-form-item label="商品评价">
              <span>{{ props.row.rating }}</span>
            </el-form-item>

            <el-form-item label="商品销售">
              <span>{{ props.row.sellCount }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.goodsDesc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="name"> </el-table-column>
      <el-table-column label="所属分类" prop="category"> </el-table-column>
      <el-table-column label="商品价格" prop="price"> </el-table-column>

      <el-table-column label="商品图片">
        <template v-slot="{ row }">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.imgUrl ? baseUrl + row.imgUrl : ''"
            :fit="fit"
          >
          </el-image>
        </template>
      </el-table-column>

      <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row, $index }">
          <el-button type="primary" size="small" @click="editList(row)"
            >编辑</el-button
          >
          <el-button type="danger" size="small" @click="delteFn(row.id, $index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageInfo.currentPage"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[5, 10, 20]"
      :total="pageInfo.total"
    >
    </el-pagination>

    <!-- 对话框 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="newTableInfo">
        <el-form-item label="商品名称">
          <el-input v-model="newTableInfo.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="商品分类">
          <el-input
            v-model="newTableInfo.category"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="商品价格">
          <el-input v-model="newTableInfo.price" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="商品图片">
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:5000/goods/goods_img_upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img
              v-if="newTableInfo.imgUrl"
              :src="
                newTableInfo.imgUrl
                  ? 'http://127.0.0.1:5000/upload/imgs/goods_img/' +
                    newTableInfo.imgUrl
                  : newTableInfo.imgUrl
              "
              class="avatar"
              style="width: 100px; height: 100px"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <!-- <el-input v-model="newTableInfo.imgUrl" autocomplete="off"></el-input> -->
        </el-form-item>

        <el-form-item label="商品描述">
          <el-input
            v-model="newTableInfo.goodsDesc"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="商品id">
          <el-input v-model="newTableInfo.id" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { getGoodsList, delGoods, updateGoods } from '@/req/GoodsAjax'
import { alterSuccess, alterError, confirmMsg } from '@/util/msgTips'

export default {
  data () {
    return {
      tableData: [
        {
          id: '',
          name: '',
          category: '',
          goodsDesc: '',
          price: '',
          imgUrl: '',
          ctime: '',
          rating: '',
          sellCount: ''
        }
      ],
      // http://39.106.222.189:5000/upload/imgs/goods_img/1625568241157.jpg
      baseUrl: 'http://127.0.0.1:5000/upload/imgs/goods_img/',
      fit: 'cover',
      // 页面信息
      pageInfo: {
        currentPage: 1,
        pageSize: 5,
        total: 0
      },
      dialogFormVisible: false,

      newTableInfo: {
        id: '',
        name: '',
        category: '',
        goodsDesc: '',
        price: '',
        imgUrl: ''
      }
    }
  },

  async created () {
    // 请求获取数据
    this.getGoodsListInfo()
  },
  methods: {
    delteFn (id) {
      confirmMsg(async () => {
        // 发送删除数据
        const { code, msg } = await delGoods(id)
        if (code === 0) {
          this.getGoodsListInfo()
          alterSuccess(msg)
        } else {
          alterError(msg)
        }
      })
    },

    handleAvatarSuccess ({ code, imgUrl }) {
      if (code === 0) {
        this.newTableInfo.imgUrl = imgUrl
      }
    },

    handleSizeChange (val) {
      this.pageInfo.pageSize = val
      this.getGoodsListInfo()
    },
    handleCurrentChange () {
      this.getGoodsListInfo()
    },
    async handleEdit () {
      this.dialogFormVisible = false
      const { code, msg } = await updateGoods(this.newTableInfo)
      if (code === 0) {
        alterSuccess(msg)
      } else {
        alterError(msg)
      }
      // 刷新页面
      this.getGoodsListInfo()
    },
    // 编辑
    async editList (row) {
      this.dialogFormVisible = true
      // 获取数据发生请求
      const { id, name, category, goodsDesc, price, imgUrl } = row
      this.newTableInfo = { id, name, category, goodsDesc, price, imgUrl }
    },
    async getGoodsListInfo () {
      const { data, total } = await getGoodsList({
        currentPage: this.pageInfo.currentPage,
        pageSize: this.pageInfo.pageSize
      })
      this.tableData = data
      this.pageInfo.total = total
    }
  }
}
</script>

<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.pic {
  width: 60px;
  height: 60px;
  border-radius: 5px;
}
.box-card {
  margin-top: 30px;
}
</style>
